<template>
    <div class="register">
        <div class="registerForm">
            <h1>注册register</h1>
            <div class="registerButton">
                <el-button type="primary" round @click="goRegister">注册</el-button>
            </div>
            <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
            <el-row>
                <el-col :span="18">
                    <div class="grid-content bg-purple-dark">
                        <el-form ref="form" :model="form" :rules="rules">
                            <el-form-item label="用户名" prop="username">
                                <el-input v-model="form.username"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="password">
                                <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码" prop="checkpassword">
                                <el-input type="password" v-model="form.checkpassword" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="form.email"></el-input>
                            </el-form-item>
                            <el-form-item label="电话" prop="phoneNumber">
                                <el-input v-model="form.phoneNumber"></el-input>
                            </el-form-item>
                            <el-form-item label="性别">
                                <el-radio-group v-model="form.sex" prop="sex">
                                    <el-radio-button label="男"></el-radio-button>
                                    <el-radio-button label="女"></el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="简介" prop="introduce">
                                <el-input type="textarea" v-model="form.introduce"></el-input>
                            </el-form-item>
                            <el-form-item label="头像上传">
                                <el-upload class="avatar-uploader"
                                    action="http://localhost:88/api/ossimage/fbk/oss/upload" :show-file-list="false"
                                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                        </el-form>
                        <el-steps :active="activeNumber">
                            <el-step title="用户名" icon="el-icon-edit"></el-step>
                            <el-step title="密码" icon="el-icon-upload"></el-step>
                            <el-step title="确认密码" icon="el-icon-upload"></el-step>
                            <el-step title="邮箱" icon="el-icon-picture"></el-step>
                            <el-step title="电话" icon="el-icon-picture"></el-step>
                            <el-step title="性别" icon="el-icon-picture"></el-step>
                            <el-step title="简介" icon="el-icon-picture"></el-step>
                        </el-steps>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import login from '../utils/login';
export default {
    data() {
        var valicateUsername = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('用户名不能为空'))
            } else {
                this.activeNumber = 1
                callback()
            }
        };
        var validatePassword = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'))
            } else {
                if (this.form.password !== '') {
                    this.form.password = value
                    this.activeNumber = 2
                }
                this.activeNumber === 2
                console.log(this.activeNumber)
                callback();
            }
        };
        var validateCheckPassword = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                this.activeNumber = 3
                callback()
            }
        };
        var validateemail = (rule, value, callback) => {
            var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(?:\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/
            if (value == "") {
                callback(new Error('不能为空'))
            } else if (regEmail.test(value)) {
                this.activeNumber = 4
                callback()
            } else {
                callback(new Error('邮箱格式错误'))
            }
        };
        var validatePhoneNumber = (rule, value, callback) => {
            var regPhone = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
            if (!value) {
                callback(new Error('号码不能为空'))
            } else if (regPhone.test(value)) {
                this.activeNumber = 5
                callback()
            } else {
                callback(new Error('电话格式错误'))
            }
        };
        var validateSex = (rule, value, callback) => {
            if (value !== "") {
                this.activeNumber = 6
                callback()
            } else {
                this.activeNumber = 5
            }
        };
        var validateIntroduce = (rule, value, callback) => {
            if (value !== "") {
                this.activeNumber = 7
                callback()
            } else {
                this.activeNumber = 6
            }
        }
        return {
            form: {
                username: '',
                password: '',
                checkpassword: '',
                email: '',
                phoneNumber: '',
                sex: '',
                introduce: '',
                avatar: ''
            },
            imageUrl: '',
            userNameAll: [],
            activeNumber: 1,
            rules: {
                username: [
                    { validator: valicateUsername, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePassword, trigger: 'blur' }
                ],
                checkpassword: [
                    { validator: validateCheckPassword, trigger: 'blur' }
                ],
                email: [
                    { validator: validateemail, trigger: 'blur' }
                ],
                phoneNumber: [
                    { validator: validatePhoneNumber, trigger: 'blur' }
                ],
                sex: [
                    { validator: validateSex, trigger: 'blur' }
                ],
                introduce: [
                    { validator: validateIntroduce, trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        goRegister() {
            this.$refs.form.validate(valida => {
                if (valida) {
                    login.registerUser(
                        this.form.username,
                        this.form.password,
                        this.form.checkpassword,
                        this.form.email,
                        this.form.phoneNumber,
                        this.form.sex,
                        this.form.introduce,
                        this.form.avatar
                    ).then(res => {
                        if (res.data) {
                            this.$message({
                                type: 'success',
                                message: '注册成功'
                            })
                            this.form.username='',
                                this.form.password='',
                                this.form.checkpassword='',
                                this.form.email='',
                                this.form.phoneNumber='',
                                this.form.sex='',
                                this.form.introduce='',
                                this.form.avatar=''
                            this.$router.push({
                                name: 'login'
                            })
                        } else {
                            this.$message({
                                type: 'error',
                                message: '注册失败,用户名已被占用'
                            })
                        }
                    }).catch(error => {
                        console.log(error)
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: '请补充完毕信息'
                    })
                }
            })
        },
        getUserName() {
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            console.log(res.data)
            if (res.data !== null) {
                this.$message({
                    type: 'success',
                    message: '上传成功'
                })
                this.form.avatar = res.data
            } else {
                this.$message({
                    type: 'error',
                    message: '上传失败'
                })
            }
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    },
    created() {
    }
}
</script>

<style scoped>
.register {
    width: 100%;
    height: 100%;
}

.registerForm {
    position: relative;
    width: 1500px;
    margin: 30px auto;

}

.registerButton {
    position: absolute;
    right: 10px;
    top: 10px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>